<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>修改密码</title>
        <meta name="renderer" content="webkit" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
        />
        <link
            rel="stylesheet"
            href="../lib/layui-v2.6.3/css/layui.css"
            media="all"
        />
        <link rel="stylesheet" href="../css/public.css" media="all" />
        <style>
            .layui-form-item .layui-input-company {
                width: auto;
                padding-right: 10px;
                line-height: 38px;
            }
        </style>
    </head>
    <body>
        <div class="layuimini-container">
            <div class="layuimini-main">
                <div class="layui-form layuimini-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label required"
                            >旧的密码</label
                        >
                        <div class="layui-input-block">
                            <input
                                type="password"
                                name="originalPwd"
                                lay-verify="required|password"
                                value=""
                                class="layui-input"
                            />
                            <tip>填写自己账号的旧的密码。</tip>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label required"
                            >新的密码</label
                        >
                        <div class="layui-input-block">
                            <input
                                type="password"
                                name="newPwd"
                                lay-verify="required|password"
                                placeholder="请输入新的密码"
                                value=""
                                class="layui-input"
                            />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required"
                            >新的密码</label
                        >
                        <div class="layui-input-block">
                            <input
                                type="password"
                                name="repeatPwd"
                                lay-verify="required|password|repeatPassword"
                                placeholder="请输入新的密码"
                                value=""
                                class="layui-input"
                            />
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button
                                class="layui-btn layui-btn-normal"
                                lay-submit
                                lay-filter="saveBtn"
                            >
                                确认保存
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
        <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
        <script>
            layui.use(["form", "miniTab"], function () {
                var form = layui.form,
                    layer = layui.layer,
                    miniTab = layui.miniTab,
                    $ = layui.$;

                form.verify({
                    // 函数写法
                    // 参数 value 为表单的值；参数 item 为表单的 DOM 对象
                    username: function (value, item) {
                        if (
                            !new RegExp(
                                "^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$"
                            ).test(value)
                        ) {
                            return "用户名不能有特殊字符";
                        }
                        if (/(^_)|(__)|(_+$)/.test(value))
                            return "用户名首尾不能出现 _ 下划线";
                        if (/^\d+$/.test(value)) return "用户名不能全为数字";

                        // 若不想自动弹出默认提示框，可返回 true，这时你可以通过其他提示方式替代（v2.5.7 新增）
                        if (value === "xxx") {
                            alert("用户名不能为敏感词");
                            return true;
                        }
                    },
                    // 数组中两个成员值分别代表：[正则表达式、正则匹配不符时的提示文字]
                    password: [/^[\S]{6,12}$/, "密码必须为6到12位的非空字符"],
                    repeatPassword: function (value, item) {
                        let newPwd = $("[name='newPwd']").val();
                        if (newPwd != value) {
                            return "新密码不一致";
                        }
                    },
                });

                //监听提交
                form.on("submit(saveBtn)", function (data) {
                    let reqData = { ...data.field };
                    layer.confirm("确认提交？", function (index) {
                        $.ajax({
                            url: "/sys-user/changePwd",
                            type: "post",
                            async: false,
                            data: JSON.stringify(reqData),
                            contentType: "application/json",
                            success: function (result) {
                                if (result.success) {
                                    layer.msg(
                                        result.msg,
                                        { icon: 1, time: 1000 },
                                        function () {
                                            miniTab.deleteCurrentByIframe();
                                        }
                                    );
                                } else {
                                    layer.msg(result.msg, {
                                        icon: 2,
                                        time: 3000,
                                    });
                                }
                            },
                        });
                    });
                    return false;
                });
            });
        </script>
    </body>
</html>
